<template>
  <div id="app1"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    const MAP_TOKEN = "bd4adce5561e1fdba1fd47b7dd3f77bd";
    window._AMapSecurityConfig = {
      securityJsCode: "bd4adce5561e1fdba1fd47b7dd3f77bd",
    };

    const LI_Datasets = [
      {
        id: "1e06bfa2-3f0e-4dc3-9714-7f4e05aff82f",
        type: "remote",
        metadata: { name: "中国第七次人口普查-省份数据" },
        serviceType: "GET_FETCH_DATA_LIST",
        properties: {
          url: "https://mdn.alipayobjects.com/afts/file/A*JODYRJsGj2UAAAAAAAAAAAAADrd2AQ/census-provice.json",
          requestOptions: { method: "GET", headers: {} },
        },
      },
    ];

    const LI_Config = {
      version: "v0.1",
      metadata: {
        name: "中国第七次人口普查",
        description:
          "中国第七次人口普查省份数据，统计时间点为 2020 年底。数据来源：https://github.com/leiii/census。",
        creatTime: "2024-8-29 21:20:0",
      },
      datasets: [],
      spec: {
        map: {
          basemap: "Gaode",
          config: {
            zoom: 4,
            center: [109.41985, 34.032325],
            pitch: 0,
            bearing: 0,
            style: "grey",
            WebGLParams: { preserveDrawingBuffer: true },
            rotation: 0,
            viewMode: "2D",
            dragRotate: true,
            pitchWithRotate: true,
            token: "f0230f884bbd54e2913c890cdf45aa7e",
          },
          logoPosition: "leftbottom",
        },
        layers: [
          {
            id: "ChinaAdminLayer_fd790301-780b-4e56-a183-48dfa32f11c8",
            type: "ChinaAdminLayer",
            metadata: { name: "中国第七次人口普查-省份数据图层" },
            sourceConfig: {
              countryAdConfig: {
                countryGranularity: "province",
                countryAdType: "adcode",
                countryAdField: "区划代码",
              },
              datasetId: "1e06bfa2-3f0e-4dc3-9714-7f4e05aff82f",
            },
            visConfig: {
              fillColor: {
                field: "人口数_合计",
                value: [
                  "#F7F7F7", // 1. 极浅灰色 - 极低密度
                  "#D0D1E6", // 2. 浅蓝色
                  "#A6B8E4", // 3. 中浅蓝色
                  "#7B9AE3", // 4. 中蓝色
                  "#4D79E6", // 5. 深蓝色
                  "#1F4C9D", // 6. 更深蓝色
                  "#003C77", // 7. 暗蓝色
                  "#003B6F", // 8. 深青色
                  "#003B67", // 9. 更深青色
                  "#003C5D", // 10. 更深灰蓝色
                  "#003C54", // 11. 极深蓝色
                  "#002D43", // 12. 几乎黑色
                  "#001F2B", // 13. 黑色 - 极高密度
                ],
                scale: { type: "quantize" },
                isReversed: false,
              },
              opacity: 0.8,
              strokeColor: "#a9abb1",
              lineWidth: 0.5,
              lineOpacity: 0.7,
              label: {
                visible: false,
                style: {
                  fill: "red",
                  fontSize: 14,
                  textAnchor: "center",
                  textOffset: [0, 0],
                },
              },
              minZoom: 0,
              maxZoom: 24,
              blend: "normal",
              showAdminLabel: true,
              adminLabelColor: "#fff",
              adminLabelFontSize: 12,
              adminLabelStroke: "#606060",
              adminLabelStrokeWidth: 0.5,
              showNationalBorders: false,
              visible: true,
            },
          },
        ],
        widgets: [
          {
            id: "AnalysisLayout",
            type: "AnalysisLayout",
            metadata: { name: "布局组件" },
            properties: {
              showFloatPanel: false,
              showSidePanel: false,
              showBottomPanel: false,
            },
          },
          {
            id: "AdministrativeSelectControl",
            type: "AdministrativeSelectControl",
            metadata: { name: "行政区域选择器" },
            properties: { position: "lefttop", showBounds: false },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "LocationSearchControl",
            type: "LocationSearchControl",
            metadata: { name: "位置查询" },
            properties: { position: "lefttop" },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "ZoomControl1",
            type: "ZoomControl",
            metadata: { name: "缩放器" },
            properties: { position: "bottomright" },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "PropertiesPanel",
            type: "PropertiesPanel",
            metadata: { name: "属性面板" },
            properties: {
              isOpen: true,
              items: [
                {
                  layerId:
                    "ChinaAdminLayer_fd790301-780b-4e56-a183-48dfa32f11c8",
                  datasetId:
                    "中国第七次人口普查-省份数据_9680e6f7-7520-41ea-9149-20c3996c2d15",
                  enable: false,
                },
              ],
            },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "LayerPopup",
            type: "LayerPopup",
            metadata: { name: "图层信息框" },
            properties: {
              isOpen: true,
              trigger: "click",
              items: [
                {
                  layerId:
                    "ChinaAdminLayer_fd790301-780b-4e56-a183-48dfa32f11c8",
                  fields: [
                    { field: "区划" },
                    { field: "性别比（女=100）" },
                    { field: "人口数_男" },
                    { field: "人口数_女" },
                    { field: "人口数_合计" },
                    { field: "少数民族人口比重（%）" },
                    { field: "城镇人口" },
                    { field: "乡村人口" },
                  ],
                },
              ],
            },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "FullscreenControl",
            type: "FullscreenControl",
            metadata: { name: "地图全屏" },
            properties: { position: "topright" },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "MapViewSettingControl1",
            type: "MapViewSettingControl",
            metadata: { name: "地图倾角" },
            properties: { position: "topright" },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "LegendWidget1",
            type: "LegendWidget",
            metadata: { name: "图例组件" },
            properties: { position: "topright", open: false },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "MapThemeControl",
            type: "MapThemeControl",
            metadata: { name: "地图主题" },
            properties: { position: "bottomright" },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "ScaleControl",
            type: "ScaleControl",
            metadata: { name: "比例尺" },
            properties: { position: "leftbottom" },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "ea0b8946-3e3d-4a87-a4a0-5dd08e7a2eed",
            type: "ExportImageControl",
            metadata: { name: "导出图片" },
            properties: { position: "topright" },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
          {
            id: "PropertiesPanel_1d5ad12e-595f-4391-a6b1-2929f40a313d",
            type: "PropertiesPanel",
            metadata: { name: "属性面板" },
            properties: {
              isOpen: true,
              items: [
                {
                  layerId:
                    "ChinaAdminLayer_fd790301-780b-4e56-a183-48dfa32f11c8",
                  datasetId: "1e06bfa2-3f0e-4dc3-9714-7f4e05aff82f",
                  enable: true,
                },
              ],
            },
            container: { id: "AnalysisLayout", slot: "controls" },
          },
        ],
      },
    };
    LI_Config.datasets = LI_Datasets;
    if (MAP_TOKEN) LI_Config.spec.map.config.token = MAP_TOKEN;

    const { ConfigProvider, theme } = window.antd;
    const { LocationInsightApp, parseAssetPackage } = window.LISDK;
    function LIAppElement() {
      const { token } = theme.useToken();
      const inheritedStyle = {
        color: token.colorText,
        fontSize: token.fontSize,
        fontFamily: token.fontFamily,
        lineHeight: token.lineHeight,
        background: token.colorBgLayout,
      };
      const assets = [
        "LICoreAssets",
        "LIAnalysisAssets",
        "SAMAssets",
        "LIZeldaAssets",
      ]
        .map((global) => parseAssetPackage(global))
        .filter((asset) => asset !== undefined);

      return React.createElement(LocationInsightApp, {
        assets,
        config: LI_Config,
        style: {
          position: "relative",
          width: "100%",
          height: "100%",
          ...inheritedStyle,
        },
      });
    }

    const appTheme = {
      algorithm: theme.darkAlgorithm,
      token: {
        colorPrimary: "#8274FF",
        colorTextBase: "rgba(255,255,255,0.85)",
        colorBgBase: "#0f0f13",
        colorInfo: "#8274FF",
        borderRadius: 6,
      },
    };
    const App = React.createElement(
      ConfigProvider,
      { theme: appTheme },
      React.createElement(LIAppElement, null)
    );

    ReactDOM.render(App, document.getElementById("app1"));
  },
};
</script>

<style lang='scss' scoped>
</style>